<template>
  <view class="wrap">
    <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType" label-position="left">
      <u-form-item label-width="150" label="组织" prop="organization">
        <u-input :border="false" placeholder="请输入组织名称" v-model="model.organization" type="text"></u-input>
      </u-form-item>
      <u-form-item label-width="150" label="部门" prop="departments">
        <u-checkbox-group>
          <u-checkbox v-model="item.checked" v-for="(item,index) in rooms" :key="index" :name="item.name" @change="checkboxChange">
            {{ item.name }}
          </u-checkbox>
        </u-checkbox-group>
        <u-checkbox style="margin-left: 25rpx;padding-left: 25rpx;border-left: solid .5px #333333;" v-model="checkall.checked" :name="checkall.name" @change="checkedAll">全选</u-checkbox>
      </u-form-item>
      <u-form-item label-width="150" label="时间地点" prop="timeaddr">
        <view v-for="(item,index) in model.timeaddr" :key="index">
          <u-input :border="false" placeholder="请选择时间" :select-open="timeShow[index]" v-model="item.time" type="select" @click="timeShow[index] = true"></u-input>
          <u-picker mode="time" v-model="timeShow[index]"></u-picker>
          <u-input :border="false" placeholder="请输入地点" v-model="item.addr" type="text"></u-input>
        </view>
      </u-form-item>
      <u-form-item label-width="150" label="介绍" prop="introduce">
        <u-input :border="false" placeholder="请输入组织介绍" v-model="model.introduce" type="text"></u-input>
      </u-form-item>
     <u-form-item label-width="150" label="二维码" prop="QRcode">
        <!-- <u-input :border="false" placeholder="" v-model="model.QRcode" type="text"></u-input> -->
        <u-upload max-count="1" :auto-upload="false" width="160" height="160" ref="QRcode"></u-upload>
      </u-form-item>
      <!-- <u-form-item label-width="150" label="视频" prop="video">
        <u-input :border="false" placeholder="" v-model="model.video" type="text"></u-input>
      </u-form-item> -->
      <u-form-item label-width="150" label="类别" prop="category">
        <u-input :border="false" type="select" placeholder="请选择类别" :select-open="classShow" v-model="model.category" @click="classShow=true"></u-input>
        <u-action-sheet :list="classList" v-model="classShow" @click="classCallback"></u-action-sheet>
      </u-form-item>
      <u-form-item label-width="150" label="标语" prop="title">
        <u-input :border="false" placeholder="请输入标语" v-model="model.title" type="text"></u-input>
      </u-form-item>
    </u-form>
    <!-- <u-button @click="" class="btn" type="warning">保存草稿</u-button> -->
    <u-button @click="submit" class="btn" type="warning">提交导出</u-button>
  </view>
</template>

<script>
  export default {
    data() {
      let that = this;
      return {
        oid: '',
        title: '',
        rooms: [
          {
            name: '组织部',
            checked: false,
          },
          {
            name: '生活部',
            checked: false,
          },
        ],
        checkall: {
          name: '全选',
          checked: false
        },
        model: {
          departments: [
            {
              department: ''
            }
          ],
          timeaddr: [
            {
              addr: '',
              time: '',
            },
            {
              addr: '',
              time: '',
            }
          ],
          introduce: '',
          QRcode: '',
          video: '',
          category: '',
          organization: '',
          title: ''
        },
        rules: {
          organization: [
            {
              required: true,
              message: '请输入组织名称',
              trigger: 'blur'
            }
          ],
          introduce: [
            {
              required: true,
              message: '请输入组织介绍',
              trigger: 'blur'
            }
          ]
        },
        border: false,
        check: false,
        // timeShow: false,
        timeShow: [
          false,
          false,
          false,
          false
        ],
        classList: [
          {
            text: '学术科技'
          },
          {
            text: '志愿服务',
          },
          {
            text: '组织办公',
          },
          {
            text: '创新创业',
          },
          {
            text: '文化体育',
          },
        ],
        classShow: false,
        errorType: ['message'],
      };
    },
    onLoad(option) {
      uni.setNavigationBarTitle({
        title: option.title
      })
      this.oid = option.id
      this.title = option.title
      this.model.org = option.title
      console.log(this.oid, this.title)
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    computed: {
      getToken() {
        return uni.getStorageSync('org_token');
      }
    },
    methods: {
      submit() {
        let that = this
        console.log(this.model)
        let model = this.model
        let QR = [];
        QR = this.$refs.QRcode.lists;
        // let imgs = [];
        // imgs = this.$refs.active.lists;
        this.$refs.uForm.validate(valid => {
          if (valid) {
            that.$upfile({
              url: '/organization/post',
              name: 'QRcode',
              filePath: QR[0].file.path,
              data: model,
              header: {
                'Authorization': "Bearer " + that.getToken
              }, // 可不填，虽然多半不可能
            }).then(res => {
              // 成功后执行，具体格式待对完接口完善
              console.log(res)
            }).catch(res => {
              // 失败后执行
              console.log(res)
            })
            // imgs.forEach(item => {
            //   that.$upfile({
            //     url: '/organization/resume',
            //     filePath: item.file.path,
            //     name: 'file',
            //     success: (uploadFileRes) => {
            //       // 根据接口具体返回格式   赋值具体对应url
            //       console.log(uploadFileRes.data);
            //     }
            //   });
            // })
            console.log('验证通过');
          } else {
            console.log('验证失败');
          }
        });
      },
      // 点击class回调
      classCallback(index) {
        console.log(index)
        uni.hideKeyboard();
        this.model.category = this.classList[index].text;
      },
      // 查询部门接口用于选择，更改表单触发
      search(name) {
        console.log(name)
      },
      //意向部门或可选择，做成下拉框的样式。
      // 选中某个复选框时，由checkbox时触发
      checkboxChange(e) {
        console.log(e);
        if (!e.value) {
          this.checkall.checked = false
        }
      },
      // 全选
      checkedAll(e) {
        console.log(e)
        this.rooms.map(val => {
          val.checked = e.value;
        })
      }
    }
  };
</script>

<style scoped lang="scss">
  .wrap {
    padding: 30rpx;
  }

  .agreement {
    display: flex;
    align-items: center;
    margin: 40rpx 0;

  }

  .agreement-text {
    padding-left: 8rpx;
    color: $u-tips-color;
  }

  .soc {}

  .btn,
  button {
    margin: 15rpx;
  }
</style>
